<template>
	<view>
	
		
		<view class="box">

			<view class="search_box_fix">
				<view class="re" @click="toPath('/pages/product/search')">
					<image src="/static/icon_serach_3.png" class="delete_fz_pos vt"></image>
					<input disabled type="text" class="search_box" placeholder-style="color: #AFAFB9;" placeholder="搜索商品" />
				</view>
			</view>
			<view class="pa10" style="height: calc(100vh - 100rpx);">
				<z-paging ref="paging" v-model="search.result" @query="queryList" :fixed="false" height="100%">
					<view class="df fw jcsb">
						<block v-for="item in search.result" :key="item.product_id">
							<view class="product_box_item" @click="toPath('/pages/product/detail?id=' +item.product_id )">
								<view class="re">
									<image mode="aspectFit" :src="item.image" class="img_size vt"></image>
								</view>
								<view class="mt25 fs36 fwb tac">{{item.product_name}}</view>
								<view class="mt40 change_money_size">
									<view class="btn_fz_pos">
										<view class="flex_box aic hp100">
											<view class="item tac">
												<view class="fs28 fwb cor_000">￥<text class="ml0">{{item.max_price}}</text></view>
												<view class=" fs22 cor_000">预估可卖</view>
											</view>
											<view class="item tac">
												<view class="fs30 cor_fff">去换钱</view>
											</view>
										</view>
									</view>
									<image src="@/static/icon_btn_1.png" class="change_money_size vt"></image>
								</view>

							</view>
						</block>
					</view>

				</z-paging>
			</view>
		</view><!-- box -->
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef } from 'vue'
	import { getProductiIndex, getProductiSearch } from '@/api/product'
	import { onLoad } from '@dcloudio/uni-app'
	
	
	
	const catId = ref(0);

	const paging = shallowRef();

	interface Search {
		hot_search : {
			data : any[]
			status : number
		}
		his_search : string[]
		result : any
		searching : boolean
	}

	const search = reactive<Search>({
		hot_search: {
			data: [],
			status: 1
		},
		his_search: [],
		result: [],
		searching: false
	})

	const toPath = (link : any) => {
		uni.navigateTo({
			url: link
		})
	}

	const queryList = async (page_no : number, page_size : number) => {
		try {
			const { lists } = await getProductiIndex({
				cat_id: catId.value,
				page_no,
				page_size
			})
			paging.value.complete(lists)
		} catch (e) {
			console.log('报错=>', e)
			//TODO handle the exception
			paging.value.complete(false)
		}
	}

	onLoad((option) => {
		catId.value = option?.id || 0;
		getHeight();
		// queryList(1, 10);
	})
</script>

<style>
	page {
		background: #F4F6F8;
		padding-top: 110rpx;
	}

	.search_box_fix {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 25rpx;
		background: #fff;
		z-index: 5;
	}

	.search_box_fix .search_box {
		position: relative;
		display: inline-block;
		width: 100%;
		padding: 0 33rpx 0 72rpx;
		height: 66rpx;
		font-size: 28rpx;
		color: #333;
		background: #F4F6F8;
		border-radius: 33rpx;
		border: 0;
		outline: none;
	}

	.product_box_item {
		position: relative;
		width: 360rpx;
		padding: 30rpx 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.product_box_item .img_size {
		width: 100%;
		height: 276rpx;
		object-fit: cover;
	}

	.change_money_size {
		position: relative;
		width: 320rpx;
		height: 80rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.btn_fz_pos {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.delete_fz_pos {
		position: absolute;
		top: 20rpx;
		left: 33rpx;
		width: 30rpx;
		height: 28rpx;
		z-index: 2;
	}
</style>